<template>
  <view class="x-product" :class="{'is-single': single}" @click="onDetail">
    <view class="_pic">
      <view class="_sign" v-if="sign.enable">
        <x-image :src="sign.value"></x-image>
      </view>
      <x-image :src="productPic" />
    </view>
    <view class="_info">
      <div class="top">
        <view v-if="isTitle && detail.productName" class="_title">{{ detail.productName }}</view>
        <view v-if="saleNum && isSales && buying.enable" class="_sales">已售{{ saleNum }}件</view>
        <view v-else class="_sales" />
      </div>

      <div class="bottom">
        <view class="_price">
          <view class="_left flex">
            <view v-if="saleAmount" class="_new"><view class="_unit">￥</view>{{ saleAmount }}</view>
            <view v-if="detail.saleAmount < detail.actualAmount" class="_old">￥{{ actualAmount }}</view>
          </view>

          <view class="_right">
            <view class="_buying-rt-bx" v-if="buying.enable && [1,2,3,4,5].includes(buying.value)">
              <view v-if="buying.value === 1" class="_buying style-1">
                <x-icon name="icon-car-fill" size="50" color="#FD3D37" />
              </view>
              <view v-else-if="buying.value === 2" class="_buying style-2">
                <x-icon name="icon-car-line" size="50" color="#FD3D37" />
              </view>
              <view v-else-if="buying.value === 3" class="_buying style-3">
                <x-icon name="icon-add-fill" size="50" color="#FD3D37" />
              </view>
              <view v-else-if="buying.value === 4" class="_buying style-4">
                马上抢
              </view>
              <view v-else-if="buying.value === 5" class="_buying style-5">
                马上抢
              </view>
            </view>
            <view v-else-if="!single && isSales && saleNum" class="_sales">已售{{ saleNum }}件</view>
          </view>
        </view>

        <view class="_buying-bt-bx" v-if="buying.enable && [6,7,8].includes(buying.value)">
          <view v-if="buying.value === 6" class="_buying">
            <x-icon name="icon-car" color="#ffffff" />
            <text class="text">点击购买</text>
          </view>
          <view v-else-if="buying.value === 7" class="_buying">
            <x-icon name="icon-add-line" color="#ffffff" />
            <text class="text">立即购买</text>
          </view>
          <view v-else-if="buying.value === 8" class="_buying">
            <x-icon name="icon-fire" color="#ffffff" />
            <text class="text">立即购买</text>
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
export default {
  name: 'XProduct',
  components: {
    XImage,
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    isTitle: {
      type: Boolean,
      default: true
    },
    isSales: {
      type: Boolean,
      default: true
    },
    // 单排
    single: {
      type: Boolean,
      default: false
    },
    // 角标
    sign: {
      type: Object,
      default: () => ({
        enable: false,
        value: 1
      })
    },
    // 购买按钮
    buying: {
      type: Object,
      default: () => ({
        enable: false,
        value: 1
      })
    },
    // 来源
    source: {
      type: String,
      default: 'list'
    },
    sourcePageType: {
      type: String,
      default: '1'
    },
    sourcePageId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  computed: {
    productPic() {
      // version 0投放 3自营
      let url = this.detail.productPic;
      if (this.detail.version === 3) {
        url = this.detail.indexPic;
      }
      return this.$tools.formatOss(url, 300);
    },
    saleAmount() {
      return this.$tools.formatNumber(this.detail.saleAmount);
    },
    actualAmount() {
      return this.$tools.formatNumber(this.detail.actualAmount);
    },
    // 销量展示逻辑 是否展示销量:1-不展示；2-saleNum大于sales 展示saleNum；3-saleNum+sales
    saleNum() {
      // 销量展示规则：0-4位数销量销量展示样式为“0件-9999件” 5位及5位以上销量，展示样式为“1万-N万”中间值为1.1万、1.2万等 不足1.1万时，展示1万+
      if (this.detail.showSales === 2) {
        const count = this.detail.saleNum;
        const sales = this.detail.sales; // 后台设置的销量临界值
        const suffix = count > 10000 ? (count < 11000 ? '+' : '') : '';
        if (count <= sales) {
          return false;
        }
        return this.$tools.formatCount({
          count,
          suffix
        });
      } else if (this.detail.showSales === 3) {
        const count = this.detail.saleNum + this.detail.sales;
        const suffix = count > 10000 ? (count < 11000 ? '+' : '') : '';
        return this.$tools.formatCount({
          count,
          suffix
        });
      } else {
        return false;
      }
    }
  },
  watch: {},
  created() {

  },
  methods: {
    onDetail() {
      let sourcePageType = 1;
      if (this.sourcePageType === 'undefined') {
        sourcePageType = 1;
      } else {
        sourcePageType = this.sourcePageType;
      }
      this.$XTrack('onListToDetailEvent', {
        productId: this.detail.productId,
        type: 0
      });
      const query = this.$tools.object2param({
        productId: this.detail.productId,
        sourcePageType: sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source
      });
      uni.navigateTo({
        url: `/pages/transit-product/index?${query}`
      });
    }
  }
};
</script>

<style lang="scss">
  .x-product{
    border-radius: 10px; overflow: hidden; background-color: #fff;
    ._pic{
      position: relative;
      height: 345px;
      .el-image{ width: 100%; height: 100%;}

      ._sign{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 74px;
        height: 74px;
      }
    }
    ._info{
      background-color: #fff; padding: 15px 15px 30px; color: #F41D1D;
      min-height: 208px;
    }
    ._title{ font-size: 28px; color: #333333; margin-bottom: 10px; overflow: hidden; height: 76px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;text-align: left}
    ._price{
      display: flex; align-items: center;justify-content: space-between;
      ._new{
        font-size: 32px; font-weight: bold; display: flex; align-items: center; flex: 1;
        ._unit{ font-size: 24px;}
      }
      ._old{ padding-left: 5px; font-size: 24px; min-height: 34px; text-decoration: line-through; color: #A4A4A4;}

      ._buying-rt-bx{
        text-align: center;
        ._buying{
          display: inline-block;
          color: #FD3D37;

          &.style-1,
          &.style-2,
          &.style-3 {
            .x-icon{
              font-size: 50px;
              line-height: normal;
            }
          }
          &.style-4{
            padding: 8px 24px;
            color: #ffffff;
            border-radius: 60px;
            background: #FD3D37;
          }
          &.style-5{
            padding: 8px 24px;
            border-radius: 8px;
            border: 1px solid;
            background: #ffffff;
          }
        }
      }
    }

    ._sales{ font-size: 24px; color: #A4A4A4; min-height: 34px;}
    &.is-single{
      display: flex; align-items: center;
      ._pic{ width: 240px; height: 240px;}
      ._info{
        flex: 1; padding: 10px 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 240px;

        .bottom{
          display: flex;
          align-items: center;
          justify-content: space-between;

          ._price{
            flex: 1;
          }
        }
      }
      ._title{ margin-bottom: 0;}
      ._buying-bt-bx{
        margin: 0;
      }
    }

    ._buying-bt-bx{
      margin: 20px 0 0;
      text-align: center;
      ._buying{
        display: inline-flex;
        align-items: center;
        padding: 8px 24px;
        background: #FD3D37;
        color: #ffffff;
        border-radius: 60px;

        .text{
          margin-left: 6px;
        }
      }
    }
  }
</style>
